<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定 v-model</title>

</head>
<body>
    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- 数据双向绑定 表单控件在实际开发中非常常见，特别对于用户信息提交需要大量的表单 -->
        <!-- vue中使用v-model指令来实现表单中元素和数据的双向绑定 -->
        <!-- input标签，双向绑定是什么意思？也就是input内容发送改变的同事，后台数据也同时改变 -->
        <input type="text" v-model:value="msg">{{msg}}
        <br>

        <!-- v-bind v-on -->
        <input type="text" :value="message" @input="valueChange()">{{msg}}

        <!-- v-model 其实就是v-bind和v-on的语法糖 -->
        <!-- v-on 当我们输入内容时，因为input中v-model绑定了message，所以能实时的把数据监听传到后台 -->
        <!-- v-vind： 当我们message发生改变的时候，因为胡子语法，实时的把数据绑定上来 -->

        <!-- 除了input，还有多行文本 textarea标签 -->

    </div>

    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                message:''
            },
            methods:{
                valueChange(){
                    // console.log(event.target.value);
                    this.message = event.target.value;
                }
            },

       })
    </script>
</body>
</html>